<!DOCTYPE html>
<html>
<head>
    <title>U-Tube Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'butt'; 
        ctx.lineJoin = 'miter';

        // --- U-Tube Coordinates ---
        // These coordinates define the container of the U-tube
        const y_top = 110;
        const y_bottom_inner = 260;
        const y_bottom_outer = 280;

        // Left arm (A1)
        const x_left_outer = 120;
        const x_left_inner = 170; // Width of opening = 50

        // Right arm (A2)
        const x_right_inner = 280;
        const x_right_outer = 350; // Width of opening = 70

        // --- Draw U-Tube Container ---
        ctx.beginPath();
        // Outer contour
        ctx.moveTo(x_left_outer, y_bottom_outer);
        ctx.lineTo(x_left_outer, y_top);
        ctx.moveTo(x_right_outer, y_top);
        ctx.lineTo(x_right_outer, y_bottom_outer);
        ctx.lineTo(x_left_outer, y_bottom_outer);
        
        // Inner contour
        ctx.moveTo(x_left_inner, y_top);
        ctx.lineTo(x_left_inner, y_bottom_inner);
        ctx.lineTo(x_right_inner, y_bottom_inner);
        ctx.lineTo(x_right_inner, y_top);
        ctx.stroke();

        // --- Draw Dimension Lines and Labels ---

        // Helper function for drawing dimension lines with ticks
        function drawDimLine(x1, y1, x2, y2, tickSize) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);

            if (y1 === y2) { // Horizontal line
                ctx.moveTo(x1, y1 - tickSize / 2);
                ctx.lineTo(x1, y1 + tickSize / 2);
                ctx.moveTo(x2, y2 - tickSize / 2);
                ctx.lineTo(x2, y2 + tickSize / 2);
            } else { // Vertical line
                ctx.moveTo(x1 - tickSize / 2, y1);
                ctx.lineTo(x1 + tickSizFe / 2, y1);
                ctx.moveTo(x2 - tickSize / 2, y2);
                ctx.lineTo(x2 + tickSize / 2, y2);
            }
            ctx.stroke();
        }

        // --- Dimension d ---
        const d_x = 90;
        drawDimLine(d_x, y_top, d_x, y_bottom_inner, 10);
        
        // Label 'd'
        ctx.font = 'italic 22px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('d', d_x - 20, (y_top + y_bottom_inner) / 2);
        
        // --- Dimension A1 ---
        const a1_y = 90;
        drawDimLine(x_left_outer, a1_y, x_left_inner, a1_y, 10);
        
        // Label 'A1'
        ctx.font = 'italic 22px serif';
        const a1_label_x = (x_left_outer + x_left_inner) / 2;
        ctx.fillText('A', a1_label_x, a1_y - 18);
        ctx.font = 'italic 16px serif';
        ctx.fillText('1', a1_label_x + 12, a1_y - 12);

        // --- Dimension A2 ---
        const a2_y = 90;
        drawDimLine(x_right_inner, a2_y, x_right_outer, a2_y, 10);
        
        // Label 'A2'
        ctx.font = 'italic 22px serif';
        const a2_label_x = (x_right_inner + x_right_outer) / 2;
        ctx.fillText('A', a2_label_x, a2_y - 18);
        ctx.font = 'italic 16px serif';
        ctx.fillText('2', a2_label_x + 12, a2_y - 12);
        
        // --- Figure Caption ---
        ctx.font = '18px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Fig. 1.243.', canvas.width / 2, canvas.height - 30);
    </script>
</body>
</html>